import { UIElement } from './ui.js';

class UICanvas extends UIElement {

    constructor(width = 300, height = 150) {

        super(document.createElement('canvas'));

        this.dom.width = width;
        this.dom.height = height;
        this.context = this.dom.getContext('2d');
        this.mouse = null;

        this.startOffsetX = 0;
        this.startOffsetY = 0;
    }

    setWidth(width = 0) {
        this.dom.width = width;
    }

    setHeight(height = 0) {
        this.dom.height = height;
    }

    clearCanvas() {
        this.context.clearRect(0, 0, this.dom.width, this.dom.height);
    }

    /**
     * 绘制网格线
     */
    drawGrid(spaceX = 8, spaceY = 8) {
        let w = this.dom.width;
        let h = this.dom.height;
        let ctx = this.context;


        ctx.save();
        ctx.lineWidth = 0.5;
        ctx.strokeStyle = 'rgba(255, 255, 255, 0.2)';

        while (w > 0) {
            ctx.beginPath();
            ctx.moveTo(w + 0.5, 0);
            ctx.lineTo(w + 0.5, this.dom.height);
            ctx.stroke();
            w -= spaceX;
        }

        while (h > 0) {
            ctx.beginPath();
            ctx.moveTo(0, h + 0.5);
            ctx.lineTo(this.dom.width, h + 0.5);
            ctx.stroke();
            h -= spaceY;
        }
        ctx.restore();

    }

    /**
     * 绘制鼠标辅助线
     */
    drawCrossLine(lineWidth = 0.5, color = 'rgba(255, 255, 255, 1)') {
        const ctx = this.context;
        // 竖直
        ctx.save();
        ctx.lineWidth = lineWidth;
        ctx.strokeStyle = color;
        ctx.beginPath();
        ctx.moveTo(this.mouse.x + 0.5, 0.5);
        ctx.lineTo(this.mouse.x + 0.5, this.dom.height);
        ctx.stroke();

        // 水平
        ctx.beginPath();
        ctx.moveTo(0.5, this.mouse.y + 0.5);
        ctx.lineTo(this.dom.width, this.mouse.y + 0.5);
        ctx.stroke();
        ctx.restore();
    }

    /**
     * 标尺
     */
    drawRule() {
        // space 是线间隔
        const space = 50;
        const ctx = this.context;
        // const startPadding = 20;
        const pi = Math.PI;

        // 先绘制标尺背景
        ctx.save();
        ctx.fillStyle = '#2C345D';
        ctx.strokeStyle = '#fff';
        ctx.fillRect(0, 0, this.dom.width, 20);
        ctx.fillRect(0, 0, 20, this.dom.height);

        let countHor = Math.floor(this.dom.width / space);
        let countVer = Math.floor(this.dom.height / space);

        let offsetX = this.startOffsetX % space;
        let offsetY = this.startOffsetY % space;

        let countX = this.startOffsetX > 0 ? Math.floor(this.startOffsetX / space) : Math.ceil(this.startOffsetX / space);
        let countY = this.startOffsetY > 0 ? Math.floor(this.startOffsetY / space) : Math.ceil(this.startOffsetY / space);

        // x 轴
        for (let i = 0; i <= countHor; i++) {
            // 20是起点距左上角的位置
            let j = i - countX;
            let x1 = i * space + 0.5 + offsetX + 20;
            let y1 = 15;
            let h = 5;

            let x2 = x1;
            let y2 = y1 + h;
            // 从上到下绘制线条
            ctx.beginPath();
            ctx.moveTo(x1, y1);
            ctx.lineTo(x2, y2);
            ctx.stroke();
            // 绘制刻度上的文字
            ctx.font = 'Arial 12px';
            ctx.textAlign = 'center';
            ctx.textBaseline = 'middle';
            ctx.fillStyle = '#fff';
            ctx.fillText(j * space, x1, y1 - 6);
        }

        // y 轴
        for (let i = 0; i <= countVer; i++) {
            let j = i - countY;
            let x1 = 15;
            let y1 = i * space + 0.5 + offsetY + 20;
            let w = 5;

            let x2 = x1 + w;
            let y2 = y1;
            ctx.beginPath();
            ctx.moveTo(x1, y1);
            ctx.lineTo(x2, y2);
            ctx.stroke();
            // 绘制刻度上的文字
            ctx.save();
            ctx.font = 'Arial 12px';
            ctx.textAlign = 'center';
            ctx.fillStyle = '#fff';
            ctx.translate(x1, y1);
            ctx.rotate(-pi / 2);
            ctx.fillText(j * space, 0, -6);
            ctx.restore();
        }


        ctx.restore();

    }

}

export { UICanvas };